<template>
	<div class="resource-details">
		<!--		<ops-line-charts></ops-line-charts>-->
		<div class="title">
			<div class="drop-down-icon"></div>
			<div class="info">设备总览，当前选中设备 fdas</div>
		</div>
		<div class="charts1 flex h-[300px]">
			<div>
				<ops-card title="运行时间" content="24 week" height="80px" width="100px"></ops-card>
				<ops-card title="运行时间" content="24 week" height="80px" width="100px"></ops-card>
				<ops-card title="运行时间" content="24 week" height="80px" width="100px"></ops-card>
			</div>
			<div>
				<ops-card title="运行时间" content="24 week" height="120px" width="100px"></ops-card>
				<ops-card title="运行时间" content="24 week" height="120px" width="100px"></ops-card>
			</div>
			<ops-process-bar :data="data" :width="30" class="p-2"></ops-process-bar>
			<div class="h-full w-full">
				<ops-table :tableData="rowData">
					<ops-table-column tableHead="" props="mission"></ops-table-column>
					<ops-table-column tableHead="company" props="company"></ops-table-column>
				</ops-table>
			</div>
		</div>
		<div class="grid grid-rows-3 grid-cols-3">
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="CPU使用率" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="内存信息" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="每秒网络带宽使用" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="系统平均负载" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="每秒磁盘读写容量" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="每次IO读写耗时" />
			<chart :max="300" :data="echartsData" class="h-[300px] m-2" title="磁盘读写速率(IOPS)" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import OpsCard from "@/views/dashboard/ops/components/OpsCard/OpsCard";
import OpsProcessBar from "@/views/dashboard/ops/components/OpsProcessBar/OpsProcessBar";
import Chart from "./components/charts.vue";
import OpsTable from "@/views/dashboard/ops/components/OpsTable/OpsTable";
import OpsTableColumn from "@/views/dashboard/ops/components/OpsTable/OpsTableColumn";
import { ref } from "vue";

const data = [
	{
		title: "总CPU使用率",
		rate: 27.9
	},
	{
		title: "IOwait使用率",
		rate: 65
	},
	{
		title: "内存使用率",
		rate: 91
	}
];

const echartsData = [
	247, 113, 137, 247, 155, 181, 119, 215, 287, 114, 218, 289, 205, 226, 162, 173, 153, 206, 277, 172, 166, 253, 252, 205, 288,
	113, 218, 138, 284, 254, 100, 204, 203, 119, 290, 141, 240, 226, 182, 227, 168, 192, 265, 275, 149, 249, 252, 288, 234, 292,
	264, 229, 132, 157, 125, 129, 107, 295, 276, 214, 113, 182, 135, 229, 139, 247, 202, 258, 178, 257, 118, 177, 264, 136, 113,
	123, 262, 251, 192, 270, 103, 152, 111, 288, 173, 215, 258, 108, 141, 132, 263, 218, 204, 145, 112, 102, 218, 127, 131, 180
];

const rowData = ref([
	{
		mission: "Voyager",
		company: "NASA",
		location: "Cape Canaveral",
		date: "1977-09-05",
		rocket: "Titan-Centaur ",
		price: 86580000,
		successful: true
	},
	{
		mission: "Apollo 13",
		company: "NASA",
		location: "Kennedy Space Center",
		date: "1970-04-11",
		rocket: "Saturn V",
		price: 3750000,
		successful: false
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	},
	{
		mission: "Falcon 9",
		company: "SpaceX",
		location: "Cape Canaveral",
		date: "2015-12-22",
		rocket: "Falcon 9",
		price: 9750000,
		successful: true
	}
]);
</script>

<style></style>
